<template>
  <div ref="wrap" class="rader-wrap"></div>
</template>

<script>
// 导入核心echarts功能
import * as echarts from "echarts/core";
// 引入雷达图图表，图表后缀都为 Chart
import { RadarChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { TitleComponent, TooltipComponent } from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, RadarChart, CanvasRenderer]);

export default {
  created() {
    // 照理说我需要页面一打开就有就应该写在created
    // 但是created无法访问到dom,而echarts需要访问dom元素
    // 所以最早写在mounted
  },

  mounted() {
    let myChart = echarts.init(this.$refs.wrap);

    let option = {
      title: {
        text: "帝国の卓球",
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: "力量", max: 100 },
          { name: "速度", max: 100 },
          { name: "防守", max: 100 },
          { name: "经验", max: 100 },
          { name: "心态", max: 100 },
          { name: "发量", max: 100 },
        ],
      },
      series: [
        {
          type: "radar",
          data: [
            {
              value: [100, 100, 100, 100, 100, 100],
              name: "马龙",
            },
            {
              value: [50, 50, 50, 50, 50, 50],
              name: "夺笋",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style>
.rader-wrap {
  width: 400px;
  height: 400px;
}
</style>